<template>
  <div class="swter-wrap" v-loading.fullscreen.lock="fullscreenLoading">
    <el-row>
      <el-col :span="4">
        <el-menu
      default-active="indexPop"
      class="el-menu-vertical-demo"
      @select="handleClose">
      <el-menu-item index="indexPop">
        <i class="el-icon-menu"></i>
        <span slot="title">首页弹窗</span>
      </el-menu-item>
      <el-menu-item index="storeSwiper">
        <i class="el-icon-menu"></i>
        <span slot="title">首页轮播图</span>
      </el-menu-item>
      <el-menu-item index="storeBanner">
        <i class="el-icon-document"></i>
        <span slot="title">首页广告</span>
      </el-menu-item>
      <el-menu-item index="seckillSwiper">
        <i class="el-icon-setting"></i>
        <span slot="title">秒抢轮播图</span>
      </el-menu-item>
      <el-menu-item index="seckBanner">
        <i class="el-icon-setting"></i>
        <span slot="title">秒抢广告</span>
      </el-menu-item>
      <el-menu-item index="bannerImage2">
        <i class="el-icon-setting"></i>
        <span slot="title">秒抢广告2</span>
      </el-menu-item>
      <el-menu-item index="StoreOfficialSwipe">
        <i class="el-icon-setting"></i>
        <span slot="title">超市轮播图</span>
      </el-menu-item>
      <el-menu-item index="StoreOfficialBanner">
        <i class="el-icon-setting"></i>
        <span slot="title">超市广告</span>
      </el-menu-item>
      <el-menu-item index="merchant">
        <i class="el-icon-setting"></i>
        <span slot="title">商城轮播图</span>
      </el-menu-item>
      <!-- <el-menu-item index="merchantAd">
        <i class="el-icon-setting"></i>
        <span slot="title">商城广告</span>
      </el-menu-item> -->
      <el-menu-item index="discountSwiper">
        <i class="el-icon-setting"></i>
        <span slot="title">折扣商城轮播图</span>
      </el-menu-item>
      <el-menu-item index="integralBanner">
        <i class="el-icon-setting"></i>
        <span slot="title">积分广告</span>
      </el-menu-item>
    </el-menu>
  </el-col>
      <el-col :span="20">
        <el-button style="margin-left: 1rem;" type="primary" v-if="type != 'indexPop' ? true : images.length < 1" @click="dialogVisible = true">添加新图片</el-button>
        <div class="images">
          <div class="image" v-for="(item,index) in images" :key="index">
            <div class="image-tool">
              <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="12">
                  <el-tag :type="item.status == 'Normal' ? 'success' : 'danger'" effect="dark">{{ item.status == 'Normal' ? '启用中' : '禁用' }}</el-tag>
                </el-col>
                <el-col :span="12" style="text-align: right;margin-bottom: .25rem">
                  <el-button size="small" type="danger" icon="el-icon-error" @click="deleteItem(item.id)">删除</el-button>
                </el-col>
              </el-row>
            </div>
            <el-image style="max-height: 300px" :src="item.image" lazy></el-image>
          </div>
          </div>
      </el-col>
    </el-row>
  <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-upload
          class="avatar-uploader"
          :action="'/api/store/admin/official/avatar?token='+ token"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      <el-form-item label="名称">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="图片地址" :disabled="true">
        <el-input v-model="form.image"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createImage">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
export default {
  name: 'Swter',
  data(){
    return {
      images:[],
      type: null,
      dialogVisible: false,
      form: {
        type: null,
        title: null,
        image: null,
        link: '#',
        remark: null,
      },
      imageUrl: null,
      token: null,
      fullscreenLoading: false
    }
  },
  created(){
    this.token = sessionStorage.getItem('accessToken');
    this.type = 'indexPop';
    this.handleClose();
  },
  methods:{
    handleClose(key ='indexPop') {
      this.type = key;
      this.images = [];
      this.form.type = key;
      this.$get(`api/v1/ad/list/${key}`).then(res=>{
        this.images = res.data;
      }).catch(err=>{
        console.log(err);
      })
    },
    handleAvatarSuccess(e){
      this.fullscreenLoading = !1;
      this.form.image = e.data;
      this.imageUrl = e.data;
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    },
    deleteItem(item){
      this.$confirm('您确定要删除这张图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$post(`api/v1/ad/delete/${item}`).then(res=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.handleClose(this.type);
            }).catch(err=>{
              // console.log(err);
            })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    createImage(){
      this.$post(`api/v1/ad/create`,this.form).then(res=>{
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        this.clearForm();
        this.imageUrl = null;
        this.dialogVisible = false;
        this.handleClose(this.type);
      }).catch(err=>{
        // console.log(err);
      })
    },
    beforeAvatarUpload(file) {
      this.fullscreenLoading = !0;
      return true
    },
    clearForm(){
      for (const iterator in this.form) {
        this.form[iterator] = null
      }
    }
  }
}
</script>
<style lang="less" scoped>
.swter-wrap {
  .images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding: 10px 15px;
    margin-top: 1rem;
    .image {
      position: relative;
      margin: 30px 0 35px;
      .image-tool {
        position: absolute;
        top: -46px;
        left: 0;
        right: 0;
        min-height: 30px;
        width: 100%;
        background: rgba(170,170,170,.4);
        padding: 0.3846rem 0.3846rem;
        box-sizing: border-box;
        border-top-left-radius: 0.3077rem;
        border-top-right-radius: 0.3077rem;
      }
    }
  }
}
.avatar-uploader {
  text-align: center;
  margin-bottom: .5rem;
}
</style>
